<template>
  <div>
    <el-container>
          <h1 style="margin: 20px 0; text-align: center; font-size: 30px">校园约自习系统</h1>
      <el-header>
        <el-button type="primary" @click="num = true">登录</el-button>
        <el-button type="primary" @click="num = false">注册</el-button>
      </el-header>
      <!-- 登录 -->
      <el-main>
        <div v-if="this.num" class="qu">
          <el-form :model="login_user" class="demo-form-inline" :rules="rules" ref="ruleForm">
            <el-form-item prop="username">
              <el-input
                  id="yonghu" v-model="login_user.username" placeholder="请输入用户名" style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input id="passwd" placeholder="请输入密码" v-model="login_user.password"
                        show-password style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item prop="userType">
              <div class="input1">
                <el-select v-model="login_user.userType" clearable
                           placeholder="请选择身份" style="width: 300px"
                >
                  <el-option v-for="item in options" :key="item.value"
                             :label="item.label" :value="item.value"
                  >
                  </el-option>
                </el-select>

                <el-button type="primary" @click="login('ruleForm')">立即登录</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <!-- 注册 -->

        <div v-else>
          <el-form :model="register_user" class="demo-form-inline" :rules="rules" ref="ruleForm2">
            <el-form-item prop="username">
              <el-input
                  id="yonghu" v-model="register_user.username" placeholder="请输入用户名"
                  style="width: 300px"
              ></el-input
              >
            </el-form-item>
            <el-form-item prop="email">
              <el-input
                  id="youxiang" v-model="register_user.email" placeholder="请输入邮箱"
                  style="width: 300px"
              ></el-input
              >
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                  id="passwd" placeholder="请输入密码" style="width: 300px"
                  v-model="register_user.password" show-password
              ></el-input>
            </el-form-item>
            <el-form-item prop="phone">
              <el-input id="phone" placeholder="请输入手机号" v-model="register_user.phone" style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item prop="userType">
              <div class="input1">
                <el-select
                    v-model="register_user.userType"
                    clearable
                    placeholder="请选择身份">
                  <el-option
                      v-for="item in option"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-button type="primary" @click="register('ruleForm2')">注册</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {reactive, ref} from "vue";
import {IP} from "@/config";
import axios from "axios";

export default {
  data() {
    return {
      options: [
        {value: "学生", label: "学生",},
        {value: "教师", label: "教师",},
        {value: "管理员", label: "管理员"},
      ],
      option: [
        {value: "学生", label: "学生",},
        {value: "教师", label: "教师",},
      ],
      num: ref("true"),
      login_user: reactive({
        username: "",
        password: "",
        userType: "",
      }),

      register_user: reactive({
        username: "",
        password: "",
        userType: "",
        email: "",
        phone: "",
      }),
      rules: {
        phone: [{required: true, message: '手机号不能为空'},
          {pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change'}],
        username: {required: true, message: '用户名不能为空'},
        password: {required: true, message: '密码不能为空'},
        email: [{required: true, message: '邮箱不能为空'},
          {pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, message: '请输入正确的邮箱格式', trigger: 'change'}]
      },
    };
  },
  methods: {
    login: function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = IP + "user/login"
          axios.post(url, this.login_user).then(res => {
            console.log('请求成功')
            console.log(res)
            if (res.data.code === 0) {
              this.$message({
                message: res.data.data.status,
                type: 'success'
              });
            } else {
              this.$message.error(res.data.data.status);
            }
            sessionStorage.setItem("info",JSON.stringify(res.data.data.info))
            let type = res.data.data.info.userType
            if (type === "管理员") {
              this.$router.push("/adminIndex")
            } else if (type === "教师") {
              this.$router.push("/teacherIndex")
            } else if (type === "学生") {
              this.$router.push("/studentIndex")
            }
          }).catch(error => {
            console.log('请求失败')
            console.log(error)
            this.$message.error('请求失败');
          })
        } else {
          this.$message.error('登录失败！');
          return false;
        }
      });

    },
    register: function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = IP + "user/register"
          axios.post(url, this.register_user).then(res => {
            console.log('请求成功')
            console.log(res)
            if (res.data.code === 0) {
              this.$message({
                message: res.data.data.status,
                type: 'success'
              });
            } else {
              this.$message.error(res.data.data.status);
            }
            this.$router.go(0)
          }).catch(error => {
            console.log('请求失败')
            console.log(error)
            this.$message.error('请求失败');
            this.$router.go(0)
          })
        } else {
          this.$message.error('注册失败');
          return false;
        }
      });

    },
  },
};
</script>

<style scoped>
.el-select {
  width: 260px;
}

#yonghu {
  width: 50%;
}

#youxiang {
  margin-top: 10px;
  width: 50%;
}

#passwd {
  margin-top: 10px;
  width: 50%;
}

#phone {
  margin-top: 10px;
  width: 50%;
}

.input1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}

.el-container {
  width: 50%;
  margin-left: 25%;
  margin-top: 10%;
}

.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
</style>
